<template>
  <Head>
    <Title>首页</Title>
    <Meta name="description" content="title"/>
    <Style type="text/css" children="body { background-color: #ffffff; }"/>
  </Head>
  <div>
    hello

    <div>
      Counter: {{ counter }}
      <button @click="counter++">
        +
      </button>
      <button @click="counter--">
        -
      </button>
    </div>
    <div>
      <button :disabled="state.countdown > 0" @click="sendVerificationCode">发送验证码</button>
      <span v-if="state.countdown > 0">{{ state.countdown }} 秒后重新发送</span>
    </div>
  </div>
</template>
<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
const state = reactive({
  countdown: 0,
  timer: null
})

const sendVerificationCode = () => {
  state.countdown = 60
  state.timer = setInterval(() => {
    if (state.countdown > 0) {
      state.countdown--
    } else {
      clearInterval(state.timer)
    }
  }, 1000)
}

watchEffect(() => {
  if (state.countdown === 0) {
    clearInterval(state.timer)
  }
})

useHead({
  script: [{children: 'console.log(\'Hello world\')'}]
})
</script>

<style scoped>

</style>
